<template>
  <div class="dashboard">
    <el-row :gutter="10">
      <el-col :span="7">
        <myCardVue title="分类商品数量">
          <myEchartVue :options="options" />
        </myCardVue>
      </el-col>

      <el-col :span="10">
        <myCardVue title="不同城市商品销量"></myCardVue>
      </el-col>

      <el-col :span="7">
        <myCardVue title="分类商品玫瑰图"></myCardVue>
      </el-col>
    </el-row>

    <el-row :gutter="10" class="content-row">
      <el-col :span="12">
        <myCardVue title="分类商品数量销量"></myCardVue>
      </el-col>

      <el-col :span="12">
        <myCardVue title="分类商品pie"></myCardVue>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, defineComponent } from 'vue';
import { useStore } from '@/store';

import myCardVue from '@/components/myCard/myCard.vue';
import myEchartVue from '@/components/myEchart/myEchart.vue';

export default defineComponent({
  setup() {
    const store = useStore();

    store.dispatch('dashboard/getDashboardAction');

    const options = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)',
          },
        },
      ],
    };

    return {
      store,
      options,
    };
  },

  components: {
    myCardVue,
    myEchartVue,
  },
});
</script>

<style lang="scss" scoped>
.dashboard {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 28, 28, 0) !important;
  .content-row {
    margin-top: 20px;
  }

  .row {
    height: 500px;
  }
}
</style>
